.appMask {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.windowContainer {
  will-change: transform;
  position: fixed;
  box-shadow:
    0px 10px 20px rgba(0, 0, 0, 0.25),
    0px 0px 1px rgba(0, 0, 0, 0.25);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  transition: all cubic-bezier(0.85, 0.14, 0.14, 0.85) 150ms;
  transform-origin: center;
  display: flex;
  flex-direction: column;
  background: #f7f8fa;
}

.windowContainer[data-size='maximize'] {
  .closeBtn,
  .toolbar,
  .windowScreen {
    border-radius: 0;
  }
}

.windowContainer[data-hide='true'] {
  opacity: 0;
  pointer-events: none;
}

.windowContainer[data-size='maxmin'] {
  top: 10%;
  left: 15%;
  width: 70%;
  height: 80%;
}

.windowContainer[data-size='minimize'] {
  top: 10%;
  left: 15%;
  width: 70%;
  height: 80%;
  transform: scale(0.1) translate(0, 0) !important;
  transform-origin: bottom;
  opacity: 0;
  pointer-events: none;
}

.notrans {
  transition: none !important;
}

.uicon {
  width: 46px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all ease-in-out 60ms;
}

.uicon img {
  transition: all ease-in-out 60ms;
}

.uicon:hover {
  background: rgba(136, 136, 136, 0.2);
}

.uicon[data-type='close']:hover {
  background: rgba(255, 0, 0, 0.8);
}

.windowScreen {
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
}
